<template>
  <div>
      <h2>显示</h2>
      姓名<input type="text" v-model="queryInfo.Name">
      <select v-model="queryInfo.Type">
        <option value="0">请选择</option>
        <option value="1">业主</option>
        <option value="2">租客</option>
      </select>
      <input type="button" value="查询" @click="getlist()">
      <input type="button" value="批量删除" @click="del()">
      <input type="button" value="批量审核" @click="SHall()">
      <input type="button" value="导出" @click="dc()">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td><input type="checkbox" v-model="checkall" @click="all"></td>
            <td>Id</td>
            <td>Imgs</td>
            <td>Area</td>
            <td>Housenumber</td>
            <td>Name</td>
            <td>Sex</td>
            <td>Nation</td>
            <td>Where</td>
            <td>Phone</td>
            <td>Card</td>
            <td>Type</td>
            <td>CrateTime</td>
            <td>State</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in list">
            <td><input type="checkbox" :value="item.Id" v-model="ids"></td>
            <td>{{item.Id}}</td>
            <td><img :src="item.Imgs" width="100" height="100"></td>
            <td>{{item.Area}}</td>
            <td>{{item.Housenumber}}</td>
            <td>{{item.Name}}</td>
            <td>{{item.Sex==false?"男":"女"}}</td>
            <td>{{item.Nation}}</td>
            <td>{{item.Where}}</td>
            <td>{{item.Phone.substring(0,3)+"****"+item.Phone.substring(7,11)}}</td>
            <td>{{item.Card}}</td>
            <td>{{item.Type==1?"业主":"租客"}}</td>
            <td>{{item.CrateTime.substring(0,10)}}</td>
            <td>{{item.State==0?"未审核":"已审核"}}</td>
            <td><input type="button" value="修改" @click="update(item.Id)">
              <input type="button" value="删除" @click="del()"></td>
          </tr>
        </tbody>
      </table>
        <div>
          <span>总共{{ sumindex }}页</span>
          <span>总共{{ sumsize }}条</span>
          <span>{{ sumindex }}/{{ queryInfo.size }}</span>
          <input type="button" value="首页" @click="getpage('a')">
          <input type="button" value="上一页" @click="getpage('b')">
          <input type="button" value="下一页" @click="getpage('c')">
          <input type="button" value="尾页" @click="getpage('d')">
        </div>
  </div>
</template>

<script setup lang="ts">

import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data:any=reactive({
  queryInfo:{
    Name:'',
    Type:1,
    index:1,
    size:2
  },
  list:[],
  sumindex:'',
  sumsize:'',
  checkall:false,
  ids:[]
})
let {queryInfo,list,sumindex,sumsize,checkall,ids}=toRefs(data);

const dc=()=>{
  location.href=`https://localhost:7200/api/one/DC?Name=${queryInfo.value.Name}&Type=${queryInfo.value.Type}&index=${queryInfo.value.index}&size=${queryInfo.value.size}`;
}


//全选和全不选
const all=()=>{
  checkall.value=!checkall.value
  if( checkall.value==true){
      ids.value=list.value.map((item:any)=>{
        return item.Id;
      })
  }
  else
  {
    ids.value=[];
  }
}

onMounted(()=>{
  getlist();
})

const getlist=()=>{
  let obj={
    Name:queryInfo.value.Name,
    Type:queryInfo.value.Type,
    index:queryInfo.value.index,
    size:queryInfo.value.size
  }

  axios({
    url:'/api/one/show',
    method:'get',
    params:obj
  }).then((res)=>{
    console.log(res)
    list.value=res.data.data;
    sumindex.value=res.data.sumindex;
    sumsize.value=res.data.sumsize;
  }).catch((err)=>{
    console.log(err)
  })

}

const getpage=(str:any)=>{

  switch(str){
    case'a':
    if(queryInfo.value.index==1){
        alert("已经是第一页了")
        return;
    }
    queryInfo.value.index=1;
    break;
    case'b':
    if(queryInfo.value.index==1){
        alert("已经是第一页了")
        return;
    }
    queryInfo.value.index--;
    break;
    case'c':
    if(queryInfo.value.index==sumindex.value){
        alert("已经是最后一页了")
        return;
    }
    queryInfo.value.index++;
    break;
    case'd':
    if(queryInfo.value.index==sumindex.value){
        alert("已经是最后一页了")
        return;
    }
    queryInfo.value.index=sumindex.value;
    break;
  
  }
  getlist();

}

const del=()=>{
  if(ids.value.length==0){
      alert('必选一项');
      return;
  }
  let f=confirm("确认删除吗!")
  if(f==true){
      let obj={
        ids:ids.value.toString(),
      }
      axios({
        url:'/api/one/DEL',
        method:'delete',
        params:obj
      }).then((res)=>{
          console.log(res)
          if(res.data.data>0){
              alert('删除成功');
              getlist();
              return;
          }
          else
          {
            alert('删除失败');
            return;
          }
      }).catch((err)=>{
         console.log(err)
      })
  }
}

const SHall=()=>{
  if(ids.value.length==0){
      alert('必选一项');
      return;
  }

  let obj={
    ids:ids.value.toString(),
  }
  axios({
    url:'/api/one/SHall',
    method:'put',
    params:obj
  }).then((res)=>{
    console.log(res)
    if(res.data.data>0){
      alert('成功');
      getlist();
      return;
    }
    else
    {
      alert('失败');
      return;
    }
    
  }).catch((err)=>{
    console.log(err)
  })


}

const update=(Id:any)=>{
    router.push({
      path:'/update',
      query:{
        Id:Id
      }
    })
}
</script>

<style scoped>

</style>